import React, { useState, useEffect }  from 'react';
import {Table, Row,Col, Tabs,Upload,Modal,Tag,
    DatePicker,Button, Form, Input, message,Tree,Card,Drawer,InputNumber,Divider,Select,Radio} from 'antd';
import {UserOutlined, LockOutlined, UploadOutlined} from '@ant-design/icons';
import { getReadXlsConfig,saveReadXlsConfig,getFileInfo,toAccountSys,
    getFileInfos,getXlsData,removeById,toVch,getVoucherInfos,getAccountingEntry} from '../api/dt'
export  default  function  ReadExcel() {

    const colRight = {textAlign:"right" };
   /// const [count, setCount] = useState(0);
    const { TabPane } = Tabs;
    const [visible, setVisible] = useState(false);
    const [flag,setFlag]=useState(0);  //改变的标志
    const [isModalVisible, setIsModalVisible] = useState(false);
    const [isModalVisibleVoucher, setIsModalVisibleVoucher] = useState(false);  //凭证详情Modal
    const [files, setFiles] = useState([]);
    const [preFileInfo,setPreFileInfo]=useState({id:"",fileName:"",builded:0}); //选中的文件信息
    const [fileInfo,setFileInfo]=useState({id:"",fileName:"",builded:0}); //选中的文件信息
    const [voucher,setVoucher]=useState({id:"",setId:"",vouDate:"",vouWord:"",vouNum:"",maker:"",billDate:"",excelId:"",pushDate:""}); //选中的财务凭证信息
    //凭证明细
    const [theVoucher,setTheVoucher]=useState({id:"",setId:"",vouDate:"",vouWord:"",vouNum:"",maker:"",billDate:"",excelId:"",pushDate:"",entries:[]});  //数据

    //读取excel 配置
    const [readXlsConfig,setReadXlsConfig]=useState({
        "beginNo": 2,
            "typeNo": 3,
            "orgNo": 2,
            "orgNameNo": 3,
            "itemNo": 5,
            "endNo": 2000,
            "planningNo": 5,
            "costNo": 7,
            "payDate": 31,
            "payId":27,
            "digNo":16,
            "dptNameNo":17,
            "cusNameNo":18,
            "itmNameNo":19,
            "prjNameNo":20,
            "prdNameNo":21,
            "perNameNo":22,
            "acntNo":23,

    })
    //fixme
    const [data,setData]=useState([]);
    const [vouchars,setVouchars]=useState([]);  //凭证
    //const [importedData,setImportedData]=useState({id:"",fileName:"",data:[]});
    // const [payDate, setPayDate] = useState(31);
    // const [orgNo, setOrgNo] = useState(2);
    // const [orgNameNo, setOrgNameNo] = useState(3);
    // const [planningNo, setPlanningNo] = useState(5);
    // const [typeNo, setTypeNo] = useState(4);
    // const [costNo, setCostNo] = useState(7);
    // const [itemNo, setItemNo] = useState(5);
    // const [beginNo, setBeginNo] = useState(2);
    // const [endNo, setEndNo] = useState(2000);

    const columns = [
        {
            title: 'key',
            dataIndex: 'key',
        },
        {
            title: '序号',
            dataIndex: 'position',
            sorter: (a, b) => a.position - b.position,
            sortDirections: ['descend'],
        },
        {
            title: '时间',
            dataIndex: 'billDate',
            //defaultSortOrder: 'descend',
            sorter: (a, b) => a.billDate - b.billDate,
        },
        {
            title: '预算单位编码',
            dataIndex: 'budgetOrgCode',
            // defaultSortOrder: 'descend',
            sorter: (a, b) => a.budgetOrgCode - b.budgetOrgCode,
        },
        {
            title: '预算单位名称',
            dataIndex: 'budgetOrgName',
            //defaultSortOrder: 'descend',
            sorter: (a, b) => a.budgetOrgName - b.budgetOrgName,
        },
        {
            title: '预算科目',
            dataIndex: 'budgetAccount',
            //defaultSortOrder: 'descend',
            sorter: (a, b) => a.budgetAccount - b.budgetAccount,
        },
        {
            title: '资金性质',
            dataIndex: 'budgetType',
            //defaultSortOrder: 'descend',
            sorter: (a, b) => a.budgetType - b.budgetType,
        },
        {
            title: '金额',
            dataIndex: 'budget',
            //defaultSortOrder: 'descend',
            sorter: (a, b) => a.budget - b.budget,
        },
        {
            title: '部门',
            dataIndex: 'dptName',
        },
        {
            title: '往来单位',
            dataIndex: 'cusName',
        },
        {
            title: '项目',
            dataIndex: 'itmName',
        },

        {
            title: '工程',
            dataIndex: 'prjName',
        },
        {
            title: '产品',
            dataIndex: 'prdName',
        },
        {
            title: '个人',
            dataIndex: 'perName',
        },
        {
            title: '摘要',
            dataIndex: 'dig',
        },
        {
            title: '账务科目',
            dataIndex: 'acntCode',
        }
    ];

    const voucherColumns = [
        // {
        //     title: 'key',
        //     dataIndex: 'key',
        // },
        {
            title: '账套',
            dataIndex: 'setId',
        },

        {
            title: '凭证日期',
            dataIndex: 'vouDate',
        },
        {
            title: '凭证字',
            dataIndex: 'vouWord',
        },
        {
            title: '凭证号',
            dataIndex: 'vouNum',
            //defaultSortOrder: 'descend',
            sorter: (a, b) => a.budgetAccount - b.budgetAccount,
        },
        {
            title: '支付日期',
            dataIndex: 'billDate',
        },
        {
            title: '制证者',
            dataIndex: 'maker',
        },
        {
            title: '上传日期',
            dataIndex: 'pushDate',
        }
    ];



    const fileColumns = [

        {
            title: '文件名称',
            dataIndex: 'fileName',

        },
        {
            title: '上传时间',
            dataIndex: 'createDate',
        },
        {
            title: '制证时间',
            dataIndex: 'operatorDate',
        },
        {
            title: '操作者',
            dataIndex: 'operator',
        },
        {
            title: '是否已制证',
            dataIndex: 'builded',
        },
    ];

    const entryColumns = [
        {
            title: '摘要',
            dataIndex: 'fdig',
            key: 'fdig'

        },
        {
            title: '会计科目',
            dataIndex: 'accNm',
            key: 'accNm'
        },
        {
            title: '部门',
            dataIndex: 'dptNm',
            key: 'dptNm'
        },
        {
            title: '借方金额',
            className: "column-right",
            dataIndex: 'fmd2string',
            key: 'fmd'
        },
        {
            title: '贷方金额',
            className: "column-right",
            dataIndex: 'fmc2string',
            key: 'fmc'
        },
    ];


    // const files = [
    //     {
    //         key: '1',
    //         name: 'John Brown',
    //         age: 32,
    //         address: 'New York No. 1 Lake Park',
    //     },
    //     {
    //         key: '2',
    //         name: 'Jim Green',
    //         age: 42,
    //         address: 'London No. 1 Lake Park',
    //     },
    //     {
    //         key: '3',
    //         name: 'Joe Black',
    //         age: 32,
    //         address: 'Sidney No. 1 Lake Park',
    //     },
    //     {
    //         key: '4',
    //         name: 'Disabled User',
    //         age: 99,
    //         address: 'Sidney No. 1 Lake Park',
    //     },
    // ]; // rowSelection object indicates the need for row selection



    // const data = [
    //     {
    //         key: '1',
    //         position: '11',
    //         billDate: '2021--9-11',
    //         budgetOrgCode: 'testOrgCode',
    //         budgetOrgName:"testOrg",
    //         budgetAccount: 'budgetAccount001',
    //         budgetType:"budgetAccountType",
    //         budget:1200.00,
    //         budgetProject:"testPro"
    //
    //     },
    //     {
    //         key: '2',
    //         position: '12',
    //         billDate: '2021--9-12',
    //         budgetOrgCode: 'testOrgCode2',
    //         budgetOrgName:"testOrg2",
    //         budgetAccount: 'budgetAccount002',
    //         budgetType:"budgetAccountType2",
    //         budget:130.00,
    //         budgetProject:"testPro2"
    //     },
    //     {
    //         key: '4',
    //         position: '14',
    //         billDate: '2021--9-14',
    //         budgetOrgCode: 'testOrgCode4',
    //         budgetOrgName:"testOrg4",
    //         budgetAccount: 'budgetAccount0014',
    //         budgetType:"budgetAccountType4",
    //         budget:12400.00,
    //         budgetProject:"testPro4"
    //
    //     },
    //     {
    //         key: '3',
    //         position: '13',
    //         billDate: '2021--9-12',
    //         budgetOrgCode: 'testOrgCode3',
    //         budgetOrgName:"testOrg3",
    //         budgetAccount: 'budgetAccount003',
    //         budgetType:"budgetAccountType3",
    //         budget:1440.00,
    //         budgetProject:"testPro3"
    //     },
    // ];







    const props = {
        name: 'file',
        action: '/reportapi/report/dt/dtReadExcel/import',
        // accept:'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel',
        // 接受的文件类型
        accept: '.xls,.xlsx',
        headers: {
            authorization: 'authorization-text'
        },
        onChange(info) {
            if (info.file.status !== 'uploading') {
                console.log(info.file, info.fileList);
            }
            if (info.file.status === 'done') {
               let _fileName=info.file.name;
                console.log(info.file, info.fileList);
               //根据文件名
                let _code=info.file.response.code;
                let _msg=info.file.response.msg;
                if(_code!=200){
                    if(_msg.indexOf("ORA-00001: 违反唯一约束条件") > -1  &&
                        _msg.indexOf("UNIQUE_FILE_NAME)") > -1
                    )
                    {
                        message.error("上传文件失败,文件名不可重复");
                    }else if(_msg.indexOf("ORA-01400: 无法将 NULL 插入") > -1){
                        if(_msg.indexOf("BUDGET_ORG_CODE") > -1){
                            message.error("上传文件失败,预算单位编码为空");
                        }else if(_msg.indexOf("BUDGET_ORG_NAME") > -1){
                            message.error("上传文件失败,预算单位名称为空");
                        }else if(_msg.indexOf("BUDGET_ACCOUNT") > -1){
                            message.error("上传文件失败,预算科目为空");
                        }else if(_msg.indexOf("BUDGET_TYPE") > -1){
                            message.error("上传文件失败,预算类型为空");
                        }else if(_msg.indexOf("BUDGET") > -1){
                            message.error("上传文件失败,金额为空");
                        }else if(_msg.indexOf("BUDGET_PROJECT") > -1){
                            message.error("上传文件失败,预算项目为空");
                        }else if(_msg.indexOf("PAY_ID") > -1){
                            message.error("上传文件失败,支付凭证号为空");
                        }else{
                            message.error("上传文件失败")
                        }
                    }else if(_msg.indexOf("ORA-02291: 违反完整约束条件") > -1 ){
                        if(_msg.indexOf("未找到父项关键字") > -1){
                            message.error("上传文件失败,预算单位编码在对码表中不存在");
                        }else{
                            message.error("上传文件失败，违反完整约束条件")
                        }
                    }else {
                        message.error("上传文件失败")
                    }
                    return;
                }
                let _id=info.file.response.data;
                getXlsData(_id).then(
                    (res) => {
                        setData(res.data);
                        setFileInfo({id:_id,fileName:_fileName,builded:0});
                        setVouchars([]);


                    },
                    (error) => {
                        console.log("get UserList failed!");
                    }
                );


                // getFileInfo(_fileName).then(
                //     (res) => {
                //         let _d=res.data[0];
                //         let _id=_d.id;
                //         getXlsData(_id).then(
                //             (res) => {
                //                 setData(res.data);
                //                 setFileInfo({id:_id,fileName:_fileName})
                //             },
                //             (error) => {
                //                 console.log("get UserList failed!");
                //             }
                //         );
                //
                //
                //
                //     },
                //     (error) => {
                //         console.log("get UserList failed!");
                //     }
                // );
                setFlag(flag+1);
                message.success(`${info.file.name} file uploaded successfully`);
            } else if (info.file.status === 'error') {
                message.error(`${info.file.name} file upload failed.`);
            }
        },
    };


    const exportExcel=()=>{
        let _id=fileInfo.id;
        if(fileInfo.id==undefined || fileInfo.id==null){
            message.info("没有数据可导出")
            return;
        }
        const url = "/reportapi/report/dt/dtReadExcel/download?id="+_id;
        window.open(url);
    }

    const removeExcel=()=>{
        let _id=fileInfo.id;
        if(_id==undefined || _id==""|| _id==null){
            message.info("没有数据")
            return;
        }
        removeById(_id).then(
            (res) => {
                setData([]);
                setFileInfo({id:"",fileName:"",builded:0})
                message.success("操作成功")
},
            (error) => {
                console.log("get UserList failed!");
                message.success("操作失败")
            }
        );


    }


    const SetConfig =()=>{
        const onFinish = (values) => {
            console.log('SetConfig Success:', values);
            saveReadXlsConfig(values).then(
                (res) => {
                    message.success("保存成功")
                },
                (error) => {
                    console.log("get UserList failed!");
                }
            );
        };

        const onFinishFailed = (errorInfo) => {
            console.log('Failed:', errorInfo);
        };


        const onChange=(value)=> {
            console.log('changed', value);
        }

        return (
            <Form
                name="basic"
                labelCol={{
                    span: 12,
                }}
                wrapperCol={{
                    span: 12,
                }}

                initialValues={{
                    payDate:readXlsConfig.payDate,
                    orgNo:readXlsConfig.orgNo,
                    orgNameNo:readXlsConfig.orgNameNo,
                    planningNo:readXlsConfig.planningNo,
                    typeNo:readXlsConfig.typeNo,
                    costNo:readXlsConfig.costNo,
                    itemNo:readXlsConfig.itemNo,
                    beginNo:readXlsConfig.beginNo,
                    payId:readXlsConfig.payId,
                    endNo:readXlsConfig.endNo,
                    digNo:readXlsConfig.digNo,
                    dptNameNo:readXlsConfig.dptNameNo,
                    cusNameNo:readXlsConfig.cusNameNo,
                    itmNameNo:readXlsConfig.itmNameNo,
                    prjNameNo:readXlsConfig.prjNameNo,
                    prdNameNo:readXlsConfig.prdNameNo,
                    perNameNo:readXlsConfig.perNameNo,
                    acntNo:readXlsConfig.acntNo,
                }}
                onFinish={onFinish}
                onFinishFailed={onFinishFailed}
                autoComplete="off"
            >


                <Card size="small" title="各项目列号" >

                    <Form.Item
                        label="支付日期"
                        name="payDate"
                        rules={[
                            {
                                required: true,
                                message: 'Please input your payDate!',
                            },
                        ]}
                    >
                        <Input/>
                        {/*<InputNumber min={1} max={50} defaultValue={2} onChange={onChange} />*/}
                    </Form.Item>


                <Form.Item
                    label="预算单位码"
                    name="orgNo"
                    rules={[
                        {
                            required: true,
                            message: 'Please input your orgNo!',
                        },
                    ]}
                >
                    <Input/>
                </Form.Item>

                    <Form.Item
                        label="预算单位名"
                        name="orgNameNo"
                        rules={[
                            {
                                required: true,
                                message: 'Please input your orgNameNo!',
                            },
                        ]}
                    >
                        <Input/>
                        {/*<InputNumber min={1} max={50} defaultValue={3} onChange={onChange} />*/}
                    </Form.Item>



                <Form.Item
                    label="预算科目"
                    name="planningNo"
                    rules={[
                        {
                            required: true,
                            message: 'Please input your planningNo!',
                        },
                    ]}
                >
                    <Input/>
                    {/*<InputNumber min={1} max={50} defaultValue={5} onChange={onChange} />*/}
                </Form.Item>


                <Form.Item
                    label="资金性质"
                    name="typeNo"
                    rules={[
                        {
                            required: true,
                            message: 'Please input your typeNo!',
                        },
                    ]}
                >
                    <Input/>
                    {/*<InputNumber min={1} max={10} defaultValue={3} onChange={onChange} />*/}
                </Form.Item>


                <Form.Item
                    label="列支金额"
                    name="costNo"
                    rules={[
                        {
                            required: true,
                            message: 'Please input your costNo!',
                        },
                    ]}
                >
                    <Input/>
                    {/*<InputNumber min={1} max={100} defaultValue={7} onChange={onChange} />*/}
                </Form.Item>


                <Form.Item
                    label="预算项目"
                    name="itemNo"
                    rules={[
                        {
                            required: true,
                            message: 'Please input your account!',
                        },
                    ]}
                >
                    <Input/>
                    {/*<InputNumber min={1} max={50} defaultValue={5} onChange={onChange} />*/}
                </Form.Item>

                    <Form.Item
                        label="原始凭证号"
                        name="payId"
                        rules={[
                            {
                                required: true,
                                message: 'Please input your payId!',
                            },
                        ]}
                    >
                        <Input/>
                        {/*<InputNumber min={1} max={50} defaultValue={5} onChange={onChange} />*/}
                    </Form.Item>
                    <Form.Item
                        label="摘要"
                        name="digNo"
                        rules={[
                            {
                                required: true,
                                message: 'Please input your orgNo!',
                            },
                        ]}
                    >
                        <Input/>
                    </Form.Item>
                    <Form.Item
                        label="部门"
                        name="dptNameNo"
                        rules={[
                            {
                                required: true,
                                message: 'Please input your orgNo!',
                            },
                        ]}
                    >
                        <Input/>
                    </Form.Item>
                    <Form.Item
                        label="往来单位"
                        name="cusNameNo"
                        rules={[
                            {
                                required: true,
                                message: 'Please input your orgNo!',
                            },
                        ]}
                    >
                        <Input/>
                    </Form.Item>
                    <Form.Item
                        label="项目"
                        name="itmNameNo"
                        rules={[
                            {
                                required: true,
                                message: 'Please input your orgNo!',
                            },
                        ]}
                    >
                        <Input/>
                    </Form.Item>
                    <Form.Item
                        label="工程"
                        name="prjNameNo"
                        rules={[
                            {
                                required: true,
                                message: 'Please input your orgNo!',
                            },
                        ]}
                    >
                        <Input/>
                    </Form.Item>
                    <Form.Item
                        label="产品"
                        name="prdNameNo"
                        rules={[
                            {
                                required: true,
                                message: 'Please input your orgNo!',
                            },
                        ]}
                    >
                        <Input/>
                    </Form.Item>
                    <Form.Item
                        label="个人"
                        name="perNameNo"
                        rules={[
                            {
                                required: true,
                                message: 'Please input your orgNo!',
                            },
                        ]}
                    >
                        <Input/>
                    </Form.Item>

                    <Form.Item
                        label="科目"
                        name="acntNo"
                        rules={[
                            {
                                required: true,
                                message: 'Please input your orgNo!',
                            },
                        ]}
                    >
                        <Input/>
                    </Form.Item>




                </Card>


                <Card size="small" title="有效行数">
                    <Form.Item
                        label="起始行"
                        name="beginNo"
                        rules={[
                            {
                                required: true,
                                message: 'Please input your password!',
                            },
                        ]}
                    >
                        <Input/>
                        {/*<InputNumber min={1} max={10} defaultValue={3} onChange={onChange} />*/}
                    </Form.Item>


                    <Form.Item
                        label="结束行"
                        name="endNo"
                        rules={[
                            {
                                required: true,
                                message: 'Please input your password!',
                            },
                        ]}
                    >
                        <Input/>
                        {/*<InputNumber min={1} max={3000} defaultValue={1000} onChange={onChange} />*/}
                    </Form.Item>
                </Card>



                <Form.Item
                    wrapperCol={{
                        offset: 8,
                        span: 16,
                    }}
                >
                    <Button type="primary" htmlType="submit">
                        保存
                    </Button>
                </Form.Item>
            </Form>
        );
    };



    const HorizontalForm = () => {
        const [form] = Form.useForm();
        const [, forceUpdate] = useState({}); // To disable submit button at the beginning.

        useEffect(() => {
            forceUpdate({});
        }, []);

        const onFinish = (values) => {
            let _id=fileInfo.id
            if(_id==undefined || fileInfo.id==""|| fileInfo.id==null){
                message.info("没有可用数据")
                return
            }
            //结果被Moment包装了
            let _d=new Date(values.billDate);
            let  _setId=values.setId;
              toVch(_id,values.maker,values.accountCode,values.direction,_d,values.setId).then(
                (res) => {
                    if(res.code==200){
                        setFileInfo({id:_id,fileName:fileInfo.fileName,builded:1})
                        //message.success("操作成功！")

                        //set本地生成的凭证数据

                        //从服务端查询制证数据
                        getVoucherInfos(_id).then(
                            (res) => {
                                setVouchars(res.data)
                            },
                            (error) => {
                                console.log("get UserList failed!");
                            }
                        )



                        toAccountSys(_id, _d,_setId).then(
                            (res) => {
                                setFileInfo({id:_id,fileName:fileInfo.fileName,builded:2})
                                message.success("操作成功！")
                            },
                            (error) => {
                                console.log(error);
                                message.error("上传财务系统失败！")
                            }
                        )
                    }else {
                        message.error("生成凭证操作失败")
                    }
                },
                (error) => {
                    message.success("操作失败")
                }
            );










        };

        return (
            <Form form={form} name="horizontal_login" layout="inline" onFinish={onFinish}>
                <Form.Item
                    name="setId"
                    rules={[
                        {
                            required: true,
                            message: '账套编号',
                        },
                    ]}
                >
                    <Input placeholder="账套编号" />
                </Form.Item>




                <Form.Item
                    name="maker"
                    rules={[
                        {
                            required: true,
                            message: '制单人',
                        },
                    ]}
                >
                    <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="制单人" />
                </Form.Item>
                <Form.Item
                    name="accountCode"
                    rules={[
                        {
                            required: true,
                            message: '对方科目',
                        },
                    ]}
                >
                    <Input placeholder="对方科目" />
                </Form.Item>

                <Form.Item
                    name="direction"
                    rules={[
                        {
                            required: true,
                            message: '对方方向',
                        },
                    ]}
                >
                    <Select
                        style={{ width: 80, margin: '0 8px' }}
                        //onChange={onCurrencyChange}
                    >
                        <Select.Option value="C">贷方</Select.Option>
                        <Select.Option value="D">借方</Select.Option>
                    </Select>
                </Form.Item>


                <Form.Item
                    name="vouWord"
                    rules={[
                        {
                            required: true,
                            message: '凭证字',
                        },
                    ]}
                >
                    <Select
                        style={{ width: 80, margin: '0 8px' }}
                        //onChange={onCurrencyChange}
                    >
                        <Select.Option value="记字">记字</Select.Option>
                        <Select.Option value="转字">转字</Select.Option>
                    </Select>
                </Form.Item>



                <Form.Item
                    name="billDate"
                    rules={[
                        {
                            required: true,
                            message: '凭证日期',
                        },
                    ]}
                >
                    <DatePicker
                    />
                </Form.Item>



                <Form.Item shouldUpdate>
                    {() => (
                        <Button
                            type="primary"
                            htmlType="submit"
                            disabled={
                                !form.isFieldsTouched(true) ||
                                !!form.getFieldsError().filter(({ errors }) => errors.length).length
                            }
                        >
                            生成财务凭证
                        </Button>
                    )}
                </Form.Item>
            </Form>
        );
    };




    const showDrawer = () => {
        //先读取
        getReadXlsConfig().then(
            (res) => {
                setReadXlsConfig(res.data);
                setVisible(true);
            },
            (error) => {
                console.log("get UserList failed!");
            }
        );



    };

    const onClose = () => {
        setVisible(false);
    };


    const showModal = () => {
        getFileInfos().then(
            (res) => {
                setFiles(res.data);
                setIsModalVisible(true);
            },
            (error) => {
                console.log("get UserList failed!");
            }
        );
    };



    // const toAccountSystem=()=>{
    //     if(fileInfo.builded==2){
    //         message.info("已经写入过账务系统，不能重复写数据")
    //         return
    //     }
    //     if(fileInfo.builded==0){
    //         message.info("本地还没有生成凭证，无数据可写入账务系统")
    //         return
    //     }
    //     if(fileInfo.builded==1){
    //          return
    //     }
    // }


//查看凭证
    const showModal_voucher = () => {

        let _id=voucher.id
        getAccountingEntry(_id).then(
            (res) =>{
                // let sum_debit=0;
                // let sum_credit=0;
                let _d=res.data;
                // _d.forEach(i=>{
                //     sum_debit=sum_debit+ i.fmd;
                //     sum_credit=sum_credit+i.fmc;
                // })
                // let _entries=res.data;



                //todo setTheVoucher
                setTheVoucher({id:voucher.id,setId:voucher.setId,vouDate:voucher.vouDate,vouWord:voucher.vouWord,
                    vouNum:voucher.vouNum,maker:voucher.maker,billDate:voucher.billDate,excelId:voucher.excelId,
                    pushDate:voucher.pushDate,entries:_d})

                setIsModalVisibleVoucher(true);
            },
            (error)=> {
                console.log("get UserList failed!");
            }
        );
    };

    const handleOk = () => {
        //根据文件信息 查excel Data 查询明细
        if(preFileInfo.id==undefined || preFileInfo.id==""){
            message.info("没有选择任何一条记录");
            return
        }

        let _id=preFileInfo.id;
        getXlsData(_id).then(
            (res) => {
                (setData(res.data));
                setFileInfo({id:_id,fileName:preFileInfo.fileName,builded:preFileInfo.builded})
                //查看制证情况
                if(preFileInfo.builded==0){
                    setVouchars([])
                }else {
                    //从服务端查询制证数据
                    getVoucherInfos(_id).then(
                        (res) => {
                            setVouchars(res.data)
                        },
                        (error) => {
                            console.log("get UserList failed!");
                        }
                    )


                }


            },
            (error) => {
                console.log("get UserList failed!");
            }
        );



        setIsModalVisible(false);
    };

    const handleCancel = () => {

        setIsModalVisible(false);
    };

    const handleCancel_Voucher = () => {

        setIsModalVisibleVoucher(false);
    };

    //点击历史数据的条目
    const rowSelection = {
        onChange: (selectedRowKeys, selectedRows) => {
            console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
            if(selectedRows.length==1){  //选中了一行
                //setFileInfo({"id":selectedRows[0].id,"fileName":selectedRows[0].fileName,"builded":selectedRows[0].builded})
                setPreFileInfo({"id":selectedRows[0].id,"fileName":selectedRows[0].fileName,"builded":selectedRows[0].builded})
            }
        },
    };

    //点击历史数据的条目 生成的凭证
    const rowSelection2 = {
        onChange: (selectedRowKeys, selectedRows) => {
            console.log(`@@@@@@@@@@@@@@selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
            if(selectedRows.length==1){  //选中了一行
                //setFileInfo({"id":selectedRows[0].id,"fileName":selectedRows[0].fileName,"builded":selectedRows[0].builded})
                // setPreFileInfo({"id":selectedRows[0].id,"fileName":selectedRows[0].fileName,"builded":selectedRows[0].builded})
                //todo
                setVoucher({id:selectedRows[0].id,setId:selectedRows[0].setId,vouDate:selectedRows[0].vouDate,
                    vouWord:selectedRows[0].vouWord,vouNum:selectedRows[0].vouNum,maker:selectedRows[0].maker,
                    billDate:selectedRows[0].billDate,excelId:selectedRows[0].excelId,pushDate:selectedRows[0].pushDate})
            }
        },
    };



    function callback(key) {
        console.log(key);
        if(key==2){

            // let _excelFileId=fileInfo.id;  //读取的excelId
            //
            // getVoucherInfos(_excelFileId).then(
            //     (res) => {
            //         setVouchars(res.data)
            //     },
            //     (error) => {
            //         console.log("get UserList failed!");
            //     }
            // );



        }

    }

    return (
        <>
            {/*<Row>*/}
            {/*<h1>读取数据，生成凭证</h1>*/}
            {/*</Row>*/}

            <Row>
                <Upload {...props}>
                    <Button icon={<UploadOutlined />}>上传Excel</Button>
                </Upload>
                <Button style={{marginLeft: 10}} key='exportExcel' onClick={exportExcel}>导出</Button>
                <Button onClick={removeExcel}>删除</Button>
                <Button onClick={showModal}>历史数据</Button>
                {/*<Button onClick={toAccountSystem}>写入账务系统</Button>*/}

                <Button onClick={showDrawer}>
                    读Excel设置
                </Button>
            </Row>

            <Divider/>

            <Row>

                <HorizontalForm/>

            </Row>
            <Divider/>

            <Tag>{fileInfo.fileName}</Tag>
            <Tag>{fileInfo.builded}</Tag>

            <Row>
                <Tabs defaultActiveKey="1"
                      onChange={callback}
                >
                    <TabPane tab="已读入的Excel数据" key="1">
                        <Table columns={columns} dataSource={data}
                              // onChange={onChange}
                        />
                    </TabPane>
                    <TabPane tab="生成的凭证" key="2">
                        <Button onClick={showModal_voucher}>查看凭证</Button>

                        <Table
                            rowSelection={{
                                type: "radio",
                                ...rowSelection2,
                            }}
                            columns={voucherColumns}
                            dataSource={vouchars}
                        />

                        {/*<Table columns={voucherColumns} dataSource={vouchars}*/}
                            {/*// onChange={onChange}*/}
                        {/*/>*/}


                    </TabPane>

                </Tabs>

            </Row>





            <Drawer title="设置" placement="right" onClose={onClose} visible={visible}>

                    <SetConfig/>



            </Drawer>


            <Modal title="历史数据"
                   destroyOnClose={true}
                   visible={isModalVisible}
                   onOk={handleOk}
                   onCancel={handleCancel}
                   width={1000}
            >

                <Table
                    rowSelection={{
                        type: "radio",
                        ...rowSelection,
                    }}
                    columns={fileColumns}
                    dataSource={files}
                />
             </Modal>



            <Modal title="凭证详情"
                   destroyOnClose={true}
                   visible={isModalVisibleVoucher}
                   onCancel={handleCancel_Voucher}
                   width={1000}
            >
                <Row justify="center"><h3>记账凭证</h3></Row>

                <Row justify="space-around">

                    <Tag>凭证字：{theVoucher.vouWord}{theVoucher.vouNum}</Tag>
                        <Tag>日期：{theVoucher.vouDate}</Tag>
                </Row>


                <Table columns={entryColumns} dataSource={theVoucher.entries}
                // onChange={onChange}
                />

            </Modal>



        </>
    );
}
